<template>
  <el-card>
    <div id="background">
      <div id="contain">
        <h1>Register</h1>

        <div class="form">
          <label>用户名：</label><input type="text" v-model.trim="name" /><br />
        </div>
        <div class="form">
          <label>密码：</label
          ><input type="password" v-model.trim="password" /><br />
        </div>
        <div class="form">
          <label>邮箱：</label><input type="email" v-model.trim="mail" /><br />
        </div>
        <div class="form">
          <label>手机号：</label><input type="tel" v-model.trim="tel" /><br />
        </div>
        <div class="button">
            <button @click.prevent="">提交</button>
        <button @click.prevent="handback">返回</button>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'ZRegister',
}
</script>

<script lang="ts" setup>
import { reactive } from 'vue'
import router from '@/router'
const trim = reactive({
  name: '',
  password: '',
  mail: '',
  tel: '',
})
const handback = () => {
  router.go(-1)
}
</script>

<style scoped>
#background {
  width: 100%;
  height: 100%;
  background: url('./image/register.png');
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
}
#contain {
  width: 580px;
  height: 560px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #00000090;
  text-align: center;
  border-radius: 20px;
}
#contain h1 {
  color: white;
}
.form {
  color: white;
  margin-left: 20%;
  margin-top: 60px;
  font-size: 20px;
  text-align: left;
}
label {
  float: left;
  width: 5em;
  margin-right: 1em;
  text-align: right;
}
input,
textarea {
  margin-left: 10px;
  padding: 4px;
  border: solid 1px #4e5ef3;
  outline: 0;
  font: normal 13px/100% Verdana, Tahoma, sans-serif;
  width: 200px;
  height: 20px;
  background: #f1f1f190;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus {
  border-color: #0d0aa1;
}
.button{
    text-align: center;
    margin-top: 20px;
}
button {
  /* position: relative; */
  height: 33px;
  width: 150px;
  background: rgba(35, 19, 252, 0.425);
  border-radius: 10px;
  margin-top: 38px;
  box-shadow: none;
  color: white;
  /* margin-left: 40px; */
  /* margin: 50px auto;
  margin-left: 30px; */
  margin-right: 20px;
 
}
</style>
